<template>
    <div class="common-layout">
      <el-container>
        <el-header>
          <!--条件查询-->
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="主题">
              <el-input v-model="form.Theme" placeholder="请输入主题" clearable />
            </el-form-item>
            
            <!-- 添加快捷筛选按钮 -->
            <el-form-item>
              <el-button type="primary" @click="form.ApplicableDisease = '高血压'; getKnowledgeInfo()">高血压</el-button>
              <el-button type="primary" @click="form.ApplicableDisease = '糖尿病'; getKnowledgeInfo()">糖尿病</el-button>
              <el-button type="primary" @click="form.ApplicableDisease = '慢阻肺'; getKnowledgeInfo()">慢阻肺</el-button>
            </el-form-item>
            
            <el-form-item label="适合病种" :label-width="formLabelWidth">
              <el-select v-model="form.ApplicableDisease" placeholder="请输适合病种" style="width: 150px;">
                <el-option label="请选择" value="" />
                <el-option label="高血压" value="高血压" />
                <el-option label="糖尿病" value="糖尿病" />
                <el-option label="高血脂" value="高血脂" />
                <el-option label="肥胖病" value="肥胖病" />
                <!-- 若业务需要“慢阻肺”，需添加以下选项 -->
                <el-option label="慢阻肺" value="慢阻肺" /> 
              </el-select>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="getKnowledgeInfo()">查询</el-button>
            </el-form-item>
          </el-form>
        </el-header>
        <el-main>
          <!--查看的弹框-->
          <el-dialog v-model="dialogFormUdp" title="知识查阅" width="1000" draggable>
            <el-form :model="KnowledgeUdpinfo">
              <table>
                <tbody>
                  <tr>
                    <el-form-item label="主题" :label-width="formLabelWidth">
                      <el-input v-model="KnowledgeUdpinfo.theme" autocomplete="off" placeholder="请输入主题"/>
                    </el-form-item>
                  </tr>
                  <tr>
                    <td>
                      <el-form-item label="适合病种" :label-width="formLabelWidth">
                        <el-select v-model="KnowledgeUdpinfo.applicableDisease" placeholder="请输适合病种">
                          <el-option label="高血压" value="高血压" />
                          <el-option label="糖尿病" value="糖尿病" />
                          <el-option label="高血脂" value="高血脂" />
                          <el-option label="肥胖病" value="肥胖病" />
                          <el-option label="慢阻肺" value="慢阻肺" /> <!-- 若需要，同步添加此处 -->
                        </el-select>
                      </el-form-item>
                    </td>
                    <td>
                      <el-form-item label="是否公开" :label-width="formLabelWidth">
                        <el-select v-model="KnowledgeUdpinfo.isPublic" style="width: 150px;" placeholder="请输是否公开">
                          <el-option label="是" :value="true" />
                          <el-option label="否" :value="false" />
                        </el-select>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr>
                    <el-form-item label="主题内容" :label-width="formLabelWidth">
                      <el-input style="width: 450px;"  :rows="10" type="textarea" v-model="KnowledgeUdpinfo.themeContent" autocomplete="off" placeholder="请输入主题内容"/>
                    </el-form-item>
                  </tr>
                  <tr>
                    <el-form-item label="创建时间" :label-width="formLabelWidth">
                      <el-input type="datetime"  v-model="KnowledgeUdpinfo.creationDate" autocomplete="off" placeholder="请输入创建时间"/>
                    </el-form-item>
                  </tr>
                </tbody>
              </table>
            </el-form>
          </el-dialog>
          <!--知识查阅列表-->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column property="knowledgeID" label="编号" width="200"/>
            <el-table-column property="theme" label="主题" width="220"/>
            <el-table-column property="applicableDisease" label="适用病种" width="200"/>
            <el-table-column property="creationDate" label="创建日期" width="200">
              <template #default="scope">
                {{ new Date(scope.row.creationDate).toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-') }}
              </template>
            </el-table-column>
            <el-table-column property="isPublic" label="是否公开" width="200">
              <template v-slot="scope">
                {{ scope.row.isPublic?"是":"否" }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="200">
              <template v-slot="scope">
                <el-button style="background-color: yellowgreen;"  plain @click="fantian(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <table style="margin: 15px auto;">
            <tbody>
              <tr>
                <!--总页数-->
                <td>
                  <el-pagination
                    v-model:current-page="page.pageIndex"
                    v-model:page-size="page.pageSize"
                    :page-sizes="[2, 4, 6, 8]"
                    :background="true"
                    layout=" total,slot,sizes"    
                    :total="page.totalCount" prev-text="上一页" next-text="下一页"
                  >
                    <span>每页{{ page.pageSize }}条,共{{ page.pageIndex }}/{{ page.totalPage }}行</span>
                  </el-pagination>
                </td>
                <!--首页-->
                <td>
                  <el-pagination
                    v-model:current-page="page.pageIndex"
                    v-model:page-size="page.pageSize"
                    :page-sizes="[2, 4, 6, 8]"
                    :background="true"
                    layout=" solt,prev,pager,next"    
                    :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button class="btn-prev" :disabled="page.pageIndex==1" @click="page.pageIndex=1">首页</button>
                  </el-pagination>
                </td>
                <!--尾页-->
                <td>
                  <el-pagination
                    v-model:current-page="page.pageIndex"
                    v-model:page-size="page.pageSize"
                    :page-sizes="[2, 4, 6, 8]"
                    :background="true"
                    layout=" solt,jumper"    
                    :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button class="btn-next" :disabled="page.pageIndex==page.totalPage" @click="page.pageIndex=page.totalPage">尾页</button>
                  </el-pagination>
                </td>
              </tr>
            </tbody>
          </table>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script setup lang="ts">
  import axios from 'axios';
  const apiUrl = import.meta.env.VITE_APP_API_URL;
  import { ElMessage, ElMessageBox } from 'element-plus';
  import moment from 'moment';
  import { onMounted, reactive, ref, watch } from 'vue'
  import { useRouter, useRoute } from 'vue-router';
  import { regionData } from "element-china-area-data";//引入
  import { useCounterStore } from '@/stores/counter';
  import type { TreeInstance } from 'element-plus'
  const store = useCounterStore();
  const router = useRouter();
  const formLabelWidth = '140px'
  
  //查询参数
  const form = reactive({
    Theme: "",
    ApplicableDisease: "",
    KnowledgeStatus: null
  })
  //分页参数
  const page = reactive({
    pageIndex: 1,
    pageSize: 5,
    totalCount: 0,
    totalPage: 0
  })
  //数据集合
  const tableData = ref([])
  //查询知识查阅
  const getKnowledgeInfo = () => {
    axios.get(apiUrl + "/T7/Knowledge/GetKnowledge", {
      params: {
        pageIndex: page.pageIndex,
        pageSize: page.pageSize,
        Theme: form.Theme,
        ApplicableDisease: form.ApplicableDisease,
        KnowledgeStatus: form.KnowledgeStatus,
      }
    }).then(res => {
      tableData.value = res.data.list;
      page.totalCount = res.data.totalCount;
      page.totalPage = res.data.totalPage;
    })
  }
  
  //查看的弹窗
  const dialogFormUdp = ref(false)
  //所要查看的参数
  const KnowledgeUdpinfo = reactive({
    "knowledgeID": 0,
    "theme": "string",
    "applicableDisease": "string",
    "isPublic": true,
    "themeContent": "string",
    "creationDate":null
  })
  //进行的反填操作
  const fantian = (row: any) => {
    dialogFormUdp.value = true
    KnowledgeUdpinfo.knowledgeID = row.knowledgeID
    KnowledgeUdpinfo.theme = row.theme
    KnowledgeUdpinfo.applicableDisease = row.applicableDisease
    KnowledgeUdpinfo.isPublic = row.isPublic
    KnowledgeUdpinfo.themeContent = row.themeContent
    KnowledgeUdpinfo.creationDate = row.creationDate
  }
  
  //监听时间
  watch(page, () => {
    getKnowledgeInfo();
  })
  //钩子函数
  onMounted(() => {
    getKnowledgeInfo();
  })


  </script>
  
<style scoped>
  :root {
    --primary-color: #409eff;
    --success-color: #67c23a;
    --warning-color: #f90;
    --danger-color: #f56c6c;
    --info-color: #909399;
    --font-primary: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-weight-medium: 500;
    --padding-base: 16px;
    --margin-base: 12px;
    --line-height-base: 1.5;
    --table-row-height: 44px;
  }
  
  .common-layout {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: #303133;
  }
  
  .el-container {
    min-height: 100vh;
  }
  
  .el-header {
    padding: var(--padding-base);
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebedf0;
  }
  
  .el-main {
    padding: var(--padding-base 24px);
    background-color: #fff;
  }
  
  .demo-form-inline {
    display: flex;
    align-items: center;
    gap: var(--margin-base);
  }
  
  .el-form-item {
    margin-bottom: 0;
  }
  
  .el-input,
  .el-select {
    height: 40px;
    border-radius: 4px;
  }
  
  .el-button {
    font-size: var(--font-size-base);
    border-radius: 4px;
    padding: 0 16px;
  }
  
  .el-button.primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }
  
  .el-table {
    margin-top: var(--margin-base);
    border-radius: 8px;
    overflow: hidden;
  }
  
  .el-table__header-wrapper {
    background-color: #f5f7fa;
  }
  
  .el-table__row {
    height: var(--table-row-height);
  }
  
  .el-table__cell {
    padding: 0 16px;
    border-bottom: 1px solid #ebedf0;
    font-size: var(--font-size-base);
  }
  
  .el-table--striped .el-table__body tr.el-table__row--striped {
    background-color: #f9fafc;
  }
  
  .el-tag {
    font-size: var(--font-size-base);
    padding: 4px 12px;
  }
  
  .el-dialog {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  
  .el-dialog__header {
    padding: var(--padding-base);
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebedf0;
  }
  
  .el-dialog__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
  }
  
  .el-dialog__body {
    padding: var(--padding-base 24px);
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  
  .el-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
  }
  
  .el-pagination__sizes {
    margin-right: var(--margin-base);
  }
  
  .el-pagination__editor {
    width: 60px;
    margin: 0 8px;
  }
  
  .el-table__fixed-right {
    padding-right: 16px;
  }
  
  .table-operation {
    display: flex;
    gap: 8px;
  }
  
  [disabled],
  .disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  @media (max-width: 768px) {
    .el-main {
      padding: var(--padding-base);
    }
    
    .el-table {
      font-size: 13px;
    }
  }
  </style>